<template>
  <div id="contianer">
    <div>
      <el-form
        ref="uploadForm"
        :model="uploadForm"
        :rules="rules"
        label-width="80px"
      >
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="课程名称" prop="folderName">
              <el-input v-model.trim="uploadForm.folderName" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="作者姓名" prop="author">
              <el-input v-model.trim="uploadForm.author" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="课程简介" prop="introduction">
              <el-input
                maxlength="200" placeholder="请输入"
                show-word-limit
                v-model.trim="uploadForm.introduction"
                type="textarea"
                :rows="3"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <hr style="border-top: 1px solid #d8d8d8" />
        <el-row :gutter="20">
          <el-col :span="8">
            <h2>视频组菜单</h2>
            <vxe-table
              show-overflow
              ref="tableRef"
              :row-config="{
                keyField: 'chapter',
                isCurrent: true,
                isHover: true,
              }"
              :column-config="{ resizable: true }"
              :loading="loading"
              :tree-config="{
                transform: false,
                rowField: 'chapter',
                expandAll: true,
              }"
              :edit-config="{
                trigger: 'click',
                mode: 'row',
                showStatus: true,
              }"
              :data="tableData"
              @cell-click="currentChangeEvent"
            >
              <vxe-column
                field="chapterName"
                title="名称"
                tree-node
                :edit-render="{}"
              >
                <template #edit="{ row, rowIndex }">
                  <span v-if="rowIndex === 0">{{row.chapterName}}</span>
                  <vxe-input v-else v-model="row.chapterName" type="text"></vxe-input>
                </template>
              </vxe-column>

<!--              <vxe-column type="expand" width="60" title="文件">
                <template #content="{ row }">
                  <ul
                    class="expand-wrapper"
                    v-for="(item, index) in row.videoList"
                    :key="index"
                  >
                    <li style="display: flex; space-between: space-between">
                      <span>{{
                        item.videoType === 0 ? "课件：" : "视频："
                      }}</span
                      ><span>{{ item.fileName }}</span
                      ><vxe-button
                        mode="text"
                        status="danger"
                        @click="deleteFile(row, item)"
                        >删除</vxe-button
                      >
                    </li>
                  </ul>

                  &lt;!&ndash; <el-row v-for="(item,index) in row.videoList" :key="index" type="flex">
                                        <el-col :span="4">
                                            <div class="grid-content bg-purple">
                                                {{ item.videoType === 0 ? '课件' : '视频' }}
                                            </div>
                                        </el-col>
                                        <el-col :span="8">
                                            <div class="grid-content">{{ item.fileName }}</div>
                                        </el-col>
                                        <el-col :span="4">
                                            <div class="grid-content bg-purple">{{ item.fileName }}</div>
                                        </el-col>
                                    </el-row> &ndash;&gt;
                </template>
              </vxe-column>-->

              <vxe-column title="操作" width="120">
                <template #default="{ row }">
                  <el-button
                    type="text"
                    @click.stop="insertRow(row)"
                    v-if="row.level < 3"
                    >{{ row.level === 1 ? "添加章" : "添加节" }}</el-button
                  >
                  <el-button
                    type="text"
                    style="color: #ff4949"
                    @click.stop="removeRow(row)"
                    v-if="row.level > 1"
                    >删除</el-button>
                </template>
              </vxe-column>
            </vxe-table>
          </el-col>
          <el-col :span="16" style="border-left: 1px solid #d8d8d8">
            <el-tag v-if="chooseChapter" style="margin: 15px 0"
              >上传至 {{ chooseChapter }}</el-tag
            >
            <el-tag v-else style="margin: 15px 0" type="danger"
              >请选择导入至哪一章节</el-tag
            >
            <el-form-item label="视频上传" v-if="chooseChapter">
              <preview-upload
                :showPreviewButton="true"
                :showDownloadButton="false"
                :showDeleteButton="true"
                :multiple="false"
                :isOnly="false"
                acceptType=".mp4,.avi,.mov,.wmv"
                uploadUrl="/knowledgeFile/video/upload"
                paramsName="file"
                :videoType="1"
                :accessoryList="filesArr"
                @getValue="val => getAccessoryList(val, '.mp4,.avi,.mov,.wmv')"
              ></preview-upload>
            </el-form-item>

            <el-form-item label="课件上传" v-if="chooseChapter">
              <preview-upload
                :showPreviewButton="true"
                :showDownloadButton="false"
                :showDeleteButton="true"
                :multiple="false"
                :isOnly="false"
                acceptType=".ppt,.pptx,.pdf"
                uploadUrl="/knowledgeFile/video/upload"
                paramsName="file"
                :videoType="0"
                :accessoryList="filesArr"
                @getValue="val => getAccessoryList(val,'.ppt,.pptx')"
              ></preview-upload>
            </el-form-item>

            <div class="file_box" v-if="fileTable.length > 0">
              <el-table
                :data="fileTable"
                v-loading="loading"
                border
                size="medium"
                class="table"
              >
                <el-table-column
                  label="序号"
                  align="center"
                  width="60"
                  fixed="left"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.$index + 1 }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="fileName"
                  label="文件名称"
                  fixed="left"
                  width="150"
                >
                  <!-- <template slot-scope="scope">
                                    <el-link
                                        type="primary"
                                        :underline="false"
                                        @click="edit(scope.row.id)"
                                        >{{ scope.row.fileName }}</el-link
                                    >
                                </template> -->
                </el-table-column>
                <el-table-column prop="fileCode" label="文件编号">
                </el-table-column>
                <el-table-column prop="fileVersion" label="文件版次">
                </el-table-column>
                <el-table-column prop="versionStatus" label="版次状态">
                  <template slot-scope="scope">
                    <span>{{
                      scope.row.versionStatus === 0 ? "废止" : "现行"
                    }}</span>
                  </template>
                </el-table-column>

                <el-table-column prop="author" label="作者姓名">
                </el-table-column>
                <el-table-column prop="uploadUser" label="上传人员">
                </el-table-column>
                <el-table-column prop="uploadTime" label="上传日期">
                </el-table-column>

                <el-table-column prop="fileTypeName" label="文件类型">
                </el-table-column>
                <el-table-column prop="professionName" label="所属专业">
                </el-table-column>
                <el-table-column prop="fileFormat" label="文件格式">
                </el-table-column>

                <el-table-column prop="statusName" label="文件状态">
                </el-table-column>
                <el-table-column prop="analyseStatusName" label="解析状态">
                </el-table-column>
                <el-table-column
                  fixed="right"
                  header-align="center"
                  align="center"
                  width="260"
                  label="操作"
                >
                  <template slot-scope="scope">
                    <el-button
                      type="text"
                      @click="previewFn(scope.row)"
                      size="small"
                      v-if="scope.row.permissionVo"
                      >查看</el-button
                    >
                    <el-button
                      type="text"
                      @click="originalDelFn(scope.row)"
                      size="small"
                       style="color:red"
                      v-if="!scope.row.permissionVo"
                      >删除</el-button
                    >
                    <el-button
                      type="text"
                      size="small"
                      @click="handleFile(scope.row)"
                      v-if="scope.row.permissionVo && scope.row.permissionVo.submit"
                      >提交
                    </el-button>
                    <el-button
                      type="text"
                      size="small"
                      @click="withdraw(scope.row)"
                      v-if="scope.row.permissionVo && scope.row.permissionVo.withdraw"
                      >撤回
                    </el-button>
                    <el-button
                      type="text"
                      size="small"
                      style="color:red"
                      @click="delFn(scope.row)"
                      v-if="scope.row.permissionVo && scope.row.permissionVo.delete"
                      >删除
                    </el-button>
                  <el-button v-if="scope.row.permissionVo && scope.row.permissionVo.update" type="text" size="small" @click="handleUpdate(scope.row)">更新</el-button>
                  
                  <!-- v-if="scope.row.permissionVo && scope.row.permissionVo.update" -->
                    <!-- <el-upload
                      style="display: inline; margin-left: 12px"
                      class="upload-demo"
                      :action="uploadImgUrl"
                      :on-success="
                        (response, file, fileList) => {
                          return uploadSuccess(
                            response,
                            file,
                            fileList,
                            scope.row
                          );
                        }
                      "
                      :show-file-list="false"
                      :headers="headers"
                    >
                      <el-button type="text" size="small">更新</el-button>
                    </el-upload> -->
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- <el-button v-if="filesArr.length > 0" type="primary" @click="importFn"
            >导入</el-button
        > -->
        <!-- 预览 -->
    <el-dialog
      class="preview"
      :visible.sync="videoVideoVisible"
      :close-on-click-modal="false"
      width="100vw"
      center
    >
      <div class="video_model">
        <div id="video"></div>
      </div>
    </el-dialog>
    <PdfPreview ref="pdf_preview_pef"></PdfPreview>
    <div style="text-align: center; margin-top: 10px">
      <el-button type="primary" @click="importFn">保存</el-button>
    </div>
     <!-- 更新 -->
     <el-dialog
      title="更新"
      :visible.sync="updateVisible"
      width="30%"
      center
      :close-on-click-modal="false"
    >
      <el-form
        :model="updateForm"
        :rules="updaterules"
        ref="updateForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="专业类型" prop="profession">
          <el-select
            v-model="updateForm.profession"
            placeholder="请选择专业类型"
            style="width: 100%"
            disabled
            clearable
          >
            <el-option
              v-for="(item, index) in majorTypeList"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="文件类型" prop="fileType">
          <el-select
            disabled
            v-model="updateForm.fileType"
            placeholder="请选择文件类型"
            style="width: 100%"
            clearable
          >
            <el-option
              v-for="(item, index) in fileTypeList"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="上传文件" prop="fileId">
          <el-upload
            :action="uploadImgUrl"
            class="upload-demo"
            :show-file-list="false"
            :accept="acceptType"
            :on-success="
              (response, file, fileList) => {
                return uploadSuccess(
                  response,
                  file,
                  fileList,
                );
              }
            "
            drag
            :headers="headers"
            show-file-list
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
            <div class="el-upload__tip" slot="tip">
              只能上传{{ acceptType }}类型的文件
            </div>
          </el-upload>
        </el-form-item>

        <el-form-item label="文件名称" prop="fileName">
          <el-input
            maxlength="100"
            v-model="updateForm.fileName"
            placeholder="请输入文件名称"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="updateConfirm">确 定</el-button>
        <el-button @click="updateVisibleClose">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import PdfPreview from './PdfPreview'
import PreviewUpload from "@/components/accessory/PreviewUploadVideo";
export default {
  data() {
    return {
      dialogVisible: false,
      loading: false,
      chooseChapter: "",
      uploadForm: {
        folderName: "",
        author: "",
        introduction: "",
      },
      currentRow: {},
      tableData: [],
      fileTable:[],
      rules: {
        folderName: [
          { required: true, message: "请输入课程名称", trigger: "change" },
        ],
        author: [
          { required: true, message: "请输入作者姓名", trigger: "change" },
        ],
        introduction: [
          { required: true, message: "请输入课程简介", trigger: "change" },
        ],
      },
      filesArr: [],
      uploadImgUrl: this.$config.VUE_APP_BASE_API + "/file/upload", // 上传的图片服务器地址
      headers: {
        token: localStorage.getItem("token"),
      },
      chooseId: '',
      videoVideoVisible: false,
      updateVisible: false,
      uploadForm: {
        majorType: "",
        fileType: "",
      },
      fileTypeList: [],
      majorTypeList: [],
      acceptType: "",
      rules: {
        majorType: [
          { required: true, message: "请选择专业类型", trigger: "change" },
        ],
        fileType: [
          { required: true, message: "请选择文件类型", trigger: "change" },
        ],
      },
      updaterules: {
        profession: [
          { required: true, message: "请选择专业类型", trigger: "change" },
        ],
        fileType: [
          { required: true, message: "请选择文件类型", trigger: "change" },
        ],
        fileName: [
          { required: true, message: "请输入文件名称", trigger: "blur" },
        ],
      },
      updateForm: {}
    };
  },
  components: {
    PreviewUpload,
    PdfPreview
  },
  watch: {
    "uploadForm.folderName"(newVal, oldVal) {
      if (this.tableData && this.tableData.length === 0) {
        this.tableData.push({
          chapterName: newVal,
          // id: Date.now(),
          chapter: Date.now(),
          parentId: null,
          level: 1,
          hasChildren: false,
          videoList: [],
          children: [],
        });
      } else {
        this.tableData.map((item) => {
          if (item.parentId === null) {
            this.$set(item, "chapterName", newVal);
          }
        });
      }
    },
  },
  mounted() {
    if (this.$route.query.from === "editVideo") {
      this.getVideoDetail();
    }
    this.majorTypeListFn();
    this.fileTypeListFn();
  },
  methods: {
    fileTypeListFn() {
      this.$http({
        url: "/dict/file/list",
        method: "GET",
        params: {},
      }).then(({ data }) => {
        console.log(data.data.data);
        this.fileTypeList = data.data.data;
      });
    },
    majorTypeListFn() {
      this.$http({
        url: "/dict/major/list",
        method: "GET",
        params: {},
      }).then(({ data }) => {
        console.log(data.data.data);
        this.majorTypeList = data.data.data;
      });
    },
    handleUpdate(row) {
      console.log(row);
      this.updateForm = JSON.parse(JSON.stringify(row));
      
      if (row.status == 5) {
        this.$confirm(`原文件已入库，如需更新，需对 原文件进行升版`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.updateVisible = true;
            // this.updateFileFn(row);
          })
          .catch(() => {});
      } else {
        this.updateVisible = true;
        // this.updateFileFn(row);
      }
    },
    updateConfirm() {
      this.$http({
        url: "/knowledgeFile/file/update",
        method: "post",
        data: {
          fileType: this.updateForm.fileType,
          author: this.updateForm.author,
          profession: this.updateForm.profession,
          fileName: this.updateForm.fileName,
          fileId: this.updateForm.fileId,
          id: this.updateForm.id
        },
      }).then(({ data }) => {
        if (data.code == 200) {
          this.$message.success("更新成功");
          this.getVideoDetail();
          this.updateVisible = false;
          setTimeout(() => {
            const node = this.findNodeById(this.tableData, this.chooseId)
            this.fileTable = node.videoList
          }, 1000)
        } else {
          this.$message.error("更新失败");
          this.updateVisible = false;
        }
      })
      .catch((err) => {
        this.$message.error("更新失败");
        this.updateVisible = false;
      });
    
    },
    updateVisibleClose() {
      this.updateVisible = false;
    },
    getVideoDetail() {
      this.$http({
        url: "/knowledgeFile/video/detail",
        method: "get",
        params: {
          id: this.$route.query.id,
        },
      }).then(({ data }) => {
        if (data.code == 200) {
          this.uploadForm = data.data.course;

          this.tableData = data.data.video && [data.data.video];
        }
      });
    },
    // 附件
    getAccessoryList(val, sufferString) {
      let sufferArr = sufferString.split(',')
      this.filesArr = val;
      const $table = this.$refs.tableRef;
      const row = $table.getCurrentRecord();
      // let num = 0
      // row.videoList.forEach(item => {
      //   sufferArr.forEach(temp => {
      //     if ('.' + item.fileFormat === temp) {
      //         num++
      //     }
      //   })
      // })
      // if (num === 0) {
        if (!row.videoList) {
          row.videoList = [];
        }
        row.videoList = row.videoList.concat(val);

        this.fileTable = row.videoList
        // $table.reloadTreeExpand(row)
        this.$nextTick(() => {
          $table.setRowExpand([row], true);
        });
      // } else {
      //   this.$message.error(
      //     "一个章/节下最多只存在一个视频文件和一个课件，上传新的视频需要先删除已有视频或课件"
      //   );
      // }
    },
    deleteFile(currentRow, itemFile) {
      if (itemFile.id) {
        this.$http({
          url: "/knowledgeFile/file/delete",
          method: "post",
          data: {
            id: itemFile.id,
          },
        }).then(({ data }) => {
          if (data.code == 200) {
          }
        });
      }

      const $table = this.$refs.tableRef;
      currentRow.videoList.forEach((item, index) => {
        if (item.fileName === itemFile.fileName) {
          currentRow.videoList.splice(index, 1);
        }
      });
      $table.reloadTreeExpand(currentRow);
      this.$nextTick(() => {
        $table.setRowExpand([currentRow], true);
      });
    },
    previewFn(row) {
      this.$http({
        url: "/knowledgeData/preview",
        method: "get",
        params: {
          id: row.id,
        },
      }).then(({ data }) => {
        console.log('row.readAuthority', row.readAuthority)
        if (!row.readAuthority) {
          this.$message.warning("文件正在解析中，不可预览");
          return;
        }
        if (row.fileFormat == 'ppt' || row.fileFormat == 'pptx' || row.fileFormat == 'pdf' || row.fileFormat == 'doc') {
          this.$nextTick(() => {
            this.$refs.pdf_preview_pef.init({downloadUrl: this.$config.VUE_APP_BASE_API_QA + data.data.downloadUrl})
          })
        } else {
          this.videoVideoVisible = true;
          this.previewVideoVisible = true;
          setTimeout(() => {
            new this.$Player({
              id: "video", // 元素id
              lang: "zh", // 设置中文
              volume: 0, // 默认静音
              autoplay: false, // 自动播放
              screenShot: false, // 开启截图功能
              height: 200,
              // 视频地址
              url: this.$config.VUE_APP_BASE_API_QA + data.data.downloadUrl,
              // 封面图
              // poster:'',
              fluid: true, // 填满屏幕 （流式布局）
              playbackRate: [0.5, 0.75, 1, 1.5, 2], // 传入倍速可选数组
            });
          }, 300);
        }
      });
    },
    handleFile(row) {
      this.$confirm(
        `确定提交${row ? "[" + row.fileName + "]" : "选中项"}吗?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).then(() => {
        this.$http({
          url: "/knowledgeFile/file/submit",
          method: "post",
          data: { id: row.id },
        }).then(({ data }) => {
          this.$message.success(data.msg);
          this.getVideoDetail();
          setTimeout(() => {
            const node = this.findNodeById(this.tableData, this.chooseId)
            this.fileTable = node.videoList
          }, 1000)
        });
      });
    },
    withdraw(row) {
      this.$confirm(
        `确定撤回${row ? "[" + row.fileName + "]" : "选中项"}吗?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).then(() => {
        this.$http({
          url: "/knowledgeFile/file/withdraw",
          method: "post",
          data: { id: row.id },
        }).then(({ data }) => {
          this.$message.success(data.msg);
          this.getVideoDetail();
          setTimeout(() => {
            const node = this.findNodeById(this.tableData, this.chooseId)
            this.fileTable = node.videoList
          }, 1000)
        });
      });
    },
    findNodeById(data, id) {
      for (let item of data) {
        if (item.id == id) {
          return item;
        }
        if (item.children && item.children.length > 0) {
          const result = this.findNodeById(item.children, this.chooseId);
          if (result) {
            return result;
          }
        }
      }
    },
    
    // 附件上传成功
    uploadSuccess(res, file, fileList, row) {
      console.log(res, file, fileList, row)
      // this.updateForm.fileName = this.updateForm.fileName
      this.updateForm.fileId = res.data.id
      // this.updateForm.id = this.updateForm.id

      // this.$http({
      //   url: "/knowledgeFile/file/update",
      //   method: "post",
      //   data: {
      //     fileType: this.uploadForm.fileType,
      //     author: this.uploadForm.author,
      //     profession: this.uploadForm.profession,
      //     fileName: row.fileName,
      //     fileId: res.data.id,
      //     id: row.id,
      //   },
      // })
      //   .then(({ data }) => {
      //     if (data.code == 200) {
      //       this.$message.success("更新成功");
      //       this.getVideoDetail();
      //     } else {
      //       this.$message.error("更新失败");
      //     }
      //   })
      //   .catch((err) => {
      //     this.$message.error("更新失败");
      //   });
    },
    // 新增的删除
    originalDelFn(row){
      this.$confirm(
        `确定删除${row ? "[" + row.fileName + "]" : "选中项"}吗?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).then(() => {
          // this.$message.success(data.msg);
        this.fileTable = this.fileTable.filter(item => item.fileName !== row.fileName);
        const rowTable = this.$refs.tableRef.getCurrentRecord();
        rowTable.videoList = rowTable.videoList.filter(item => item.fileName !== row.fileName);
      });
    },
    delFn(row) {
      this.$confirm(
        `确定删除${row ? "[" + row.fileName + "]" : "选中项"}吗?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).then(() => {
        this.$http({
          url: "/knowledgeFile/file/delete",
          method: "post",
          data: { id: row.id },
        }).then(({ data }) => {
          this.$message.success(`${row.statusName == '已入库' ? '已提交删除申请' : '删除成功'}`);
          this.getVideoDetail();
          if (row.statusName != '已入库') {
            this.fileTable = this.fileTable.filter((item) => item.id !== row.id);
            const rowTable = this.$refs.tableRef.getCurrentRecord();
            rowTable.videoList = rowTable.videoList.filter(item => item.fileName !== row.fileName);
          }
          setTimeout(() => {
              const node = this.findNodeById(this.tableData, this.chooseId.id)
              this.fileTable = node.videoList
            }, 1000)
        });
      });
    },
    async insertRow(currRow) {
      console.log("currRow", currRow)
      const $table = this.$refs.tableRef;
      // // 如果 null 则插入到目标节点顶部
      // // 如果 -1 则插入到目标节点底部
      // // 如果 row 则有插入到效的目标节点该行的位置
      const rid = Date.now();
      const number = currRow.children?currRow.children.length + 1:1;
      const title = currRow.level === 1 ? "章" : "节";
      const record = {
        chapterName: `第${number}${title}`,
        id: rid,
        chapter: rid,
        parentId: currRow.id || null, // 需要指定父节点，自动插入该节点中
        level: currRow.level + 1,
        hasChildren: false,
        children: [],
        videoList: [],
      };
      if (currRow.children || currRow.children === []) {
        currRow.children = currRow.children.concat(record);
      } else {
        currRow.children = [record];
      }
      $table.reloadTreeExpand(currRow);
      $table.setAllTreeExpand(true)
      $table.remove({});
      // const { row: newRow } = await $table.insertAt(record, -1)
      // await $table.setTreeExpand(currRow, true) // 将父节点展开
      // await $table.setEditRow(newRow) // 插入子节点
      // this.$set(item, 'chapterName', newVal)
      // currRow.children.push(record)
      // this.tableData.push(record)
    },
    async removeRow(row) {
      if (row.videoList && row.videoList.length > 0) {
        this.$message.error("删除失败！该章节下存在文件，请删除文件后操作！");
      } else {
        this.tableData[0].children.forEach((item, index) => {
          if (item.chapter === row.chapter) {
            this.tableData[0].children.splice(index, 1);
          } else {
            item.children &&
              item.children.forEach((i, indexNum) => {
                if (i.chapter === row.chapter) {
                  item.children.splice(indexNum, 1);
                }
              });
          }
        });
        const $table = this.$refs.tableRef;
        await $table.remove(row);
        $table.reloadTreeExpand(row);
      }
    },
      currentChangeEvent({ row }) {
      this.chooseChapter = row.chapterName;
      this.currentRow = row;
      this.fileTable = row.videoList
      this.chooseId = row.id;
    },
    importFn() {
      let url = "";
      const params = {
        ...this.uploadForm,
        profession: this.$route.query.profession,
        fileType: this.$route.query.fileType,
      };
      if (this.$route.query.from === "editVideo") {
        url = "/knowledgeFile/video/update";
        params.id = this.$route.query.id;
      } else {
        url = "/knowledgeFile/video/save";
      }
      this.$refs.uploadForm.validate((valid) => {
        if (valid) {
          this.$http({
            url,
            method: "post",
            data: {
              course: params,
              video: {
                ...this.tableData[0],
              },
            },
          }).then(({ data }) => {
            if (data.code == 200) {
              this.$message.success("保存成功");
              this.$router.push("/knowledgeManage/originalFile");
            }
          });
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
#contianer {
  width: 100%;
  height: 100%;
  background: #fff;
  padding: 50px;
  h2 {
    font-size: 20px;
    font-weight: 550;
  }
  .file_box {
    margin-top: 20px;
  }
  .preview ::v-deep.el-dialog__body {
    width: 100vw !important;
    height: 96vh !important;
    display: flex !important;
    justify-content: space-around;
  }
  .preview ::v-deep.el-dialog__footer {
    margin-top: -65px !important;
  }
  .preview ::v-deep.el-dialog {
    margin-top: 0px !important;
  }
  .video_model {
    width: 100%;
    border-radius: 5px;
    margin-bottom: 20px;

    #video {
      flex: auto;
      height: 85vh !important;
    }

    .video_info {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 10px;
      line-height: 22px;

      h3 {
        flex: 1;
        padding: 0;
        margin: 0;
        font-weight: 550;
        font-size: 18x;
      }

      .author,
      .blurb {
        font-size: 14px;
      }
    }
  }
}
</style>
